{% extends "smErp/base.html" %}

{% block css_style %}
    {% load staticfiles %}
    <link href="{% static 'smErp/css/brand_info.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/basic.min.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/dropzone.min.css' %}" type="text/css" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="inner wrp">
        <div class="page_nav">
            <a href="{% url 'smErp:manage' %}" class="jsUrlLink" data-url="{% url 'smErp:manage' %}" target="_self">管理中心</a>
            <span class="gap">/</span>
            创建产品
        </div>
        <div class="container_box cell_layout">
            <div class="processor" id="process">
                <ol>
                    <li id="set1" class="current size1of1">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">1</i>
                            <h4>填写基本信息</h4>
                        </div>
                    </li>
                    <li id="set2" class="size1of2 last">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">2</i>
                            <h4>提交成功</h4>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="step_panel text_padding">
                <div class="app_create_box app" id="step1">
                    <form class="form layui-form" id="form" novalidate="novalidate">
                        {% csrf_token %}
                        <div class="frm_control_group">
                            <label for="" class="frm_label frm_select_label">所属品牌</label>
{#                            <div class="frm_controls ">#}
                                <select id="brandid" class="frm_select_box" value="" name="brandid" lay-ignore>
                                {% for brand in user_info.smerpbrand_set.all %}
                                    {% if brand.check_status == 2 %}
                                        <option value ="{{ brand.id }}" class="frm_select button">{{ brand.name_zh }}</option>
                                    {% endif %}
                                {% empty %}
                                    <option value ="" class="frm_select button">暂无品牌</option>
                                {% endfor %}
                                </select>
{#                            </div>#}
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">产品名称</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="name" id="name" class="frm_input" type="text">
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label frm_select_label">产品分类</label>
                            <select id="type" class="frm_select_box" value="" name="type" lay-ignore>
                                    <option value ="" class="frm_select button">请选择产品分类</option>
                                    {% for type in product_types %}
                                        <option value ="{{ type.0 }}" class="frm_select button">{{ type.1 }}</option>
                                    {% endfor %}
                            </select>
                            {#                            </div>#}
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">功能定位</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="pfunction" id="pfunction" class="frm_textarea" maxlength="800"></textarea>
                                </span>
                            </div>
                        </div>


                        <div class="frm_control_group">
                            <label for="" class="frm_label">适用人群</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="suitable" id="suitable" class="frm_textarea" maxlength="800"></textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">不适用人群</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="not_suitable" id="not_suitable" class="frm_textarea" maxlength="800"></textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">注意事项</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="attention" id="attention" class="frm_textarea" maxlength="800"></textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">客服热线</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="hotline" id="hotline" class="frm_textarea" maxlength="800"></textarea>
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">客服信息</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="service_info" id="service_info" class="frm_textarea" maxlength="800"></textarea>
                                </span>

                            </div>
                        </div>
                        <div class="frm_control_group ">
                            <label for="" class="frm_label">生产流程展示</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传生产流程展示文件，<br>大小不超过2M。
                                            </p>
                                            <button type="button" class="layui-btn" id="workflows_btn" style="background-color: #44b549;margin-bottom: 10px;">
                                                <i class="layui-icon">&#xe67c;</i>上传文件
                                            </button>
{#                                            <span class="upload_area webuploader-container"></span>#}
                                            <input name="workflows" id="workflows" value="" type="hidden">
                                            <div class="frm_controls" style="margin-top: 10px;border: none;">
                                                <span class="frm_input_box" style="border: none;">
                                                    <div id="workflows-file" class="input-div">文件名</div>
                                                    <!--<input name="workflows_name" id="workflows-name" class="frm_input" type="text" readonly>-->
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">生产执行标准</label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="standard" id="standard" class="frm_textarea" maxlength="800"></textarea>
                                </span>

                            </div>
                        </div>

                        <div class="frm_control_group ">
                            <label for="" class="frm_label">执行标准附件</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传生产执行标准附件文件，<br>大小不超过5M。
                                            </p>
                                            <button type="button" class="layui-btn" id="standard_pic_btn" style="background-color: #44b549;margin-bottom: 10px;">
                                                <i class="layui-icon">&#xe67c;</i>上传文件
                                            </button>
{#                                            <span class="upload_area webuploader-container"></span>#}
                                            <input name="standard_pic" id="standard_pic" value="" type="hidden">
                                            <div class="frm_controls" style="margin-top: 10px;">
                                                <span class="frm_input_box" style="border: none;">
                                                    <div id="standard-pic-file" class="input-div">文件名</div>
                                                    <!--<input name="workflows_name" id="workflows-name" class="frm_input" type="text" readonly>-->
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="frm_control_group ">
                            <label for="" class="frm_label">产品图片</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传产品图片，<br>720*400像素，大小不超过500KB。
                                            </p>
                                            <button type="button" class="layui-btn" id="product_img_btn" style="background-color: #44b549;margin-bottom: 10px;">
                                                <i class="layui-icon">&#xe67c;</i>上传文件
                                            </button>
{#                                            <span class="upload_area webuploader-container"></span>#}
                                            <input name="img" id="product-img" value="" type="hidden">
                                            <div style="margin-bottom: 10px;">
                                                <p class="upload_preview" id="fileView-product-img" style="display: block; width: 108px;">
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="layui-form-item" pane="">
                            <label class="frm_label">选择原材料</label>
                            <div class="layui-input-block">
                                {% for material in user_info.smerpmaterial_set.all %}
                                <input type="checkbox" name="material" lay-skin="primary" title="{{ material.name }}" value="{{ material.id }}">
                                {% endfor %}
                            </div>
                        </div>
                        <div class="tool_bar border with_form">
                            <a href="javascript:void(0);" class="btn btn_primary jsSendBt" id="submitBtn">提交</a>
                        </div>
                    </form>
                </div>

                <div class="app_create_box result" id="step2" style="display:none">
                    <div class="page_msg simple default">
                        <div class="inner group">
                            <span class="msg_icon_wrp">
                                <i class="icon_msg success"></i>
                            </span>
                            <div class="msg_content">
                                <h4>您的产品已成功提交审核，预计在3天内完成审核</h4>

                                <p class="spacing">
                                    <a href="{% url 'smErp:manage' %}" data-url="{% url 'smErp:manage' %}t" target="_self" class="btn btn_primary jsUrlLink">查看管理中心</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footscript %}
    <script src="{% static 'smErp/assets/dropzone/dropzone.min.js' %}" ></script>
    <script>
        //layui.use(['form'], function(){ var form = layui.form });
        layui.use(['form','upload'], function(){
            var form = layui.form;
            var upload = layui.upload;
            //工作流程展示文件
            var workflow_uploadInst = upload.render({
                elem: '#workflows_btn' //绑定元素
                ,url: "{% url 'smErp:file_upload' %}" //上传接口
                ,accept: 'file'
                ,size: 2048
                ,data : {"max_size": 500, "height": 512, "width": 512}
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        $("#workflows-file").html(res.filename);
                        //fileview_logo.empty();
                        //fileview_logo.append('<img id="" src="' + res.img_url + '">');
                        $("#workflows").val(res.file_url);

                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

            //生产执行标准附件
            var standard_uploadInst = upload.render({
                elem: '#standard_pic_btn' //绑定元素
                ,url: "{% url 'smErp:file_upload' %}" //上传接口
                ,accept: 'file'
                ,data : {"max_size": 500, "height": 595, "width": 842}
                ,done: function(res){
                    //上传完毕回调
{#                    layer.closeAll('loading'); //关闭loading#}
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        $("#standard-pic-file").html(res.filename);
                        $("#standard_pic").val(res.file_url);
                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

            //产品图片上传
            var product_uploadInst = upload.render({
                elem: '#product_img_btn' //绑定元素
                ,url: "{% url 'smErp:image_upload' %}" //上传接口
                ,accept: 'images'
                ,data : {"max_size": 500, "height": 400, "width": 720}
                ,done: function(res){
                    //上传完毕回调
{#                    layer.closeAll('loading'); //关闭loading#}
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        var fileview_product_img = $("#fileView-product-img");
                        //'<img src="'+ res.img_url +'" alt="'+ file.name +'" class="layui-upload-img">'
                        fileview_product_img.append('<img class="view-img" src="'+ res.img_url +'">');
                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

        });
        $("#email").blur(function(){
{#           alert("hello world");#}
            var email = $("#email").val();
{#            alert(email);#}
            if(!email){
{#                alert("hellow");#}
                $("#email-msg").css("color","red");
                $("#email-msg").html("请输入邮箱地址");
                $("#email-msg").show();
            }
        });

        // 存储上传的图片
        var upload_imgs = {} ;
        var id = 1;

        // 上传图片
        Dropzone.autoDiscover = false;

        $("#dropz_product").dropzone({
            url: "{% url 'smErp:file_upload' %}",
            addRemoveLinks: true,
            dictRemoveLinks: "x",
            dictCancelUpload: "x",
            dictRemoveFile:"删除",
            maxFiles: 5,
            maxFilesize: 5,
            acceptedFiles: "image/*",
            init: function() {
                this.on("success", function(file, data) {
                    console.log("File " + file.name + "uploaded");
                    var logo_obj = $("<input name='img' style='display:none;' value='" + data.img_url + "' readonly/>");
                    $("#dropz_product").append(logo_obj);
                    file.id = id;        // 换成服务端唯一的索引，可以后面删除对应的input
                    upload_imgs[file.id] = logo_obj;
                    id += 1;

                });
                this.on("removedfile", function(file) {
                    console.log("File " + file.name + "removed");
                    upload_imgs[file.id].remove();
                });
            }
        });

        $("#submitBtn").on("click", function () {
            // 原材料的选择
            var material_arr = document.getElementsByName('material');
            var material_arr_list = new Array();
            for(i=0; i < material_arr.length ; i++){
                if(material_arr[i].checked){
                    material_arr_list.push(material_arr[i]);
                }
            };

            var brandid = $("#brandid").val();
            var name = $("#name").val();
            var type = $("#type").val();
            var pfunction = $("#pfunction").val();
            var suitable = $("#suitable").val();
            var not_suitable = $("#not_suitable").val();
            var attention = $("#attention").val();
            var service_info = $("#service_info").val();
            var workflows = $("#workflows").val();
            var standard = $("#standard").val();
            if(!brandid || !name || !type ||!pfunction || !suitable || !not_suitable || !attention || !service_info || !workflows || !standard){
                if(!brandid){
                    layer.msg("请选择产品品牌");
                    return;
                }
                if(!name){
                    layer.msg("请填写产品名称");
                    return;
                }
                if(!type){
                    layer.msg("请选择产品类型");
                    return;
                }
                if(!pfunction){
                    layer.msg("请输入产品功能定位");
                    return;
                }
                if(!suitable){
                    layer.msg("请输入适用人群");
                    return;
                }
                if(!not_suitable){
                    layer.msg("请输入不适用人群");
                    return;
                }
                if(!attention){
                    layer.msg("请输入注意事项");
                    return;
                }
                if(!service_info){
                    layer.msg("请输入客服信息");
                    return;
                }
                if(!standard){
                    layer.msg("请输入执行标准");
                    return;
                }
            }
            if(material_arr_list.length == 0){
                layer.msg("请选择原材料");
                return;

            }

             // 产品图片
            var product_imgs = document.getElementsByName('img');
            debugger;
            if(product_imgs.length == 0){
                layer.msg("请上传产品图片");
                return;
            }

            // 提交按钮
            var params = $("#form").serialize();
            console.log(params);
            $.post("{% url 'smErp:create_product' %}", params,
                function(data, satuts, xhr){
                         alert(data.reason);
                        if(data.result == 0) {
                            // 切换状态
                            $("#set2").addClass("current");
                            $("#set1").removeClass("current");
                            $("#set1").addClass("complete");
                            $("#set1").children("div[class='step_inner']").children("i[class='icon_step']").html("");
                            $("#set1").children(".step_line").css("background-color", "#44b549");
                            // 成功显示成功
                            $("#step1").hide();
                            $("#step2").show();
                        }else{
                            layer.msg(data.reason);
                        }
                    },
            'json');
        });
    </script>
{% endblock %}




